<script setup>
import { reactive, onMounted } from "vue";
import { deviceDetection } from "@pureadmin/utils";

import Player from "xgplayer";
import "xgplayer/dist/index.min.css";
import iconifyIconOnline from "@/components/ReIcon/src/iconifyIconOnline";
defineOptions({
  name: "HelpCenter"
});
onMounted(() => {
  playerList.forEach(item => {
    new Player({
      id: item.id,
      lang: item.lang,
      volume: item.volume,
      width: item.width,
      height: item.height,
      customConfig: item.customConfig,
      autoplay: item.autoplay,
      screenShot: item.screenShot,
      videoAttributes: item.videoAttributes,
      url: item.url,
      poster: item.poster,
      fluid: item.fluid,
      playbackRate: item.playbackRate
    });
  });
});
const playerList = [
  {
    id: "mse0",
    lang: "zh",
    // 默认静音
    volume: 0,
    width: 270,
    height: 155,
    autoplay: false,
    screenShot: true,
    videoAttributes: {
      crossOrigin: "anonymous"
    },
    customConfig: {
      // 自定义配置
      remark: "标签编辑教程"
    },
    url: "//lf3-static.bytednsdoc.com/obj/eden-cn/nupenuvpxnuvo/xgplayer_doc/xgplayer-demo.mp4",
    poster:
      "//lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/byted-player-videos/1.0.0/poster.jpg",
    fluid: deviceDetection(),
    //传入倍速可选数组
    playbackRate: [0.5, 0.75, 1, 1.5, 2]
  },
  {
    id: "mse1",
    lang: "zh",
    width: 270,
    height: 155,
    // 默认静音
    volume: 0,
    autoplay: false,
    screenShot: true,
    videoAttributes: {
      crossOrigin: "anonymous"
    },
    customConfig: {
      // 自定义配置
      remark: "Windows电脑打印教程"
    },
    url: "//lf3-static.bytednsdoc.com/obj/eden-cn/nupenuvpxnuvo/xgplayer_doc/xgplayer-demo.mp4",
    poster:
      "//lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/byted-player-videos/1.0.0/poster.jpg",
    fluid: deviceDetection(),
    //传入倍速可选数组
    playbackRate: [0.5, 0.75, 1, 1.5, 2]
  },
  {
    id: "mse2",
    lang: "zh",
    // 默认静音
    volume: 0,
    autoplay: false,
    screenShot: true,
    width: 270,
    height: 155,
    videoAttributes: {
      crossOrigin: "anonymous"
    },
    customConfig: {
      // 自定义配置
      remark: "多排标签打印序列号教程"
    },
    url: "//lf3-static.bytednsdoc.com/obj/eden-cn/nupenuvpxnuvo/xgplayer_doc/xgplayer-demo.mp4",
    poster:
      "//lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/byted-player-videos/1.0.0/poster.jpg",
    fluid: deviceDetection(),
    //传入倍速可选数组
    playbackRate: [0.5, 0.75, 1, 1.5, 2]
  },
  {
    id: "mse3",
    lang: "zh",
    // 默认静音
    volume: 0,
    width: 270,
    height: 155,
    autoplay: false,
    screenShot: true,
    videoAttributes: {
      crossOrigin: "anonymous"
    },
    customConfig: {
      // 自定义配置
      remark: "Windows电脑打印教程"
    },
    url: "//lf3-static.bytednsdoc.com/obj/eden-cn/nupenuvpxnuvo/xgplayer_doc/xgplayer-demo.mp4",
    poster:
      "//lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/byted-player-videos/1.0.0/poster.jpg",
    fluid: deviceDetection(),
    //传入倍速可选数组
    playbackRate: [0.5, 0.75, 1, 1.5, 2]
  }
];
const guidelineList = [
  {
    name: "快速入门",
    id: 1,
    list: [
      {
        id: 1,
        title: "桌面创建标签软件的快捷入口",
        link: ""
      },
      {
        id: 2,
        title: "简单编辑教程-自定义标签模板",
        link: ""
      },
      {
        id: 3,
        title: "批量打印序列号教程",
        link: ""
      },
      {
        id: 4,
        title: "制作多排标签教程",
        link: ""
      },
      {
        id: 1,
        title: "如何打印标签",
        link: ""
      }
    ]
  }
];
</script>

<template>
  <div class="text-bg_color">
    <!-- 视频 -->
    <el-card shadow="always" class="mb-5">
      <template #header>
        <div
          style="width: 100%; font-size: 30px; font-weight: bold"
          class="card-header text-[#000000d9] dark:text-white text-2xl font-bold flex items-center"
        >
          视频教程
          <iconifyIconOnline
            class="inline-block m-1"
            icon="material-symbols:video-library-outline-sharp"
            style="font-size: 30px"
          />
        </div>
      </template>
      <div class="flex justify-between flex-grow">
        <div v-for="(item, index) in playerList" :key="index">
          <div :id="item.id" class="ounded-2xl mb-1" />
          <p style="font-size: 15px" class="text-[#000000d9] dark:text-white">
            {{ item.customConfig.remark }}
          </p>
        </div>
      </div>
    </el-card>

    <el-card shadow="always" class="mb-5">
      <template #header>
        <div
          style="width: 100%; font-size: 30px; font-weight: bold"
          class="card-header text-[#000000d9] dark:text-white text-2xl font-bold flex items-center"
        >
          使用指南
          <iconifyIconOnline
            class="inline-block m-1"
            icon="material-symbols:book-5-outline-rounded"
            style="font-size: 30px"
          />
        </div>
      </template>
      <div class="flex justify-between">
        <div
          v-for="(type, index) in guidelineList"
          :key="index"
          class="guideline"
        >
          <p class="guideline-title">{{ type.name }}</p>
          <div v-for="(item, index) in type.list" :key="index">
            <el-link
              type="primary"
              :href="item.link"
              target="_blank"
              class="text-[#000000d9] dark:text-white guideline-content"
            >
              {{ item.title }}</el-link
            >
          </div>
        </div>
      </div>
    </el-card>

    <!-- 常见问题 -->
    <el-card shadow="always">
      <template #header>
        <div
          style="width: 100%; font-size: 30px; font-weight: bold"
          class="card-header text-[#000000d9] dark:text-white text-2xl font-bold flex items-center"
        >
          常见问题
          <iconifyIconOnline
            class="inline-block m-1"
            icon="solar:question-circle-broken"
            style="font-size: 30px"
          />
        </div>
      </template>
      <div style="width: 100%">
        <el-collapse v-model="activeNames" @change="handleChange">
          <el-collapse-item title="如何实现元素的整齐排版？" name="1">
            <div>
              经常遇到的情况是，标签信息很多，这些信息很难实现左对齐或者等距展示，排版样式错乱，怎么办？
              答：使用工具栏的“对齐”功能。选中所有元素后，在“对齐”
              里点击左对齐，再点击垂直等距，就可以一键完成排版啦~;
            </div>
          </el-collapse-item>
          <el-collapse-item title="如何实现对元素的多选？" name="2">
            <div>
              windows系统，按住ctrl或shift键不松，再点击需要选择的目标即可实现多选，如果点错，可以再次点击取消目标。
            </div>
          </el-collapse-item>
          <el-collapse-item title="支持哪些打印机？" name="3">
            <div>
              标签软件支持市面上常见品牌，如汉印、佳博、启锐、兄弟、斑马、芯烨、得力、思普瑞特、快麦等主流品牌的USB和蓝牙打印机。
            </div>
          </el-collapse-item>
          <el-collapse-item
            title="打印助手已经下载了，仍然提示下载如何处理？"
            name="4"
          >
            <div>
              （1）请检查打印助手是否已启动，启动后需要刷新当前页面。（2）可能是电脑的杀毒软件自动删除了，需要在杀毒软件中给打印助手添加白名单即可。（3）在电脑安装的软件列表中查看该软件是否存在，不存在表示安装后被手动或电脑设置的某个程序删除了，实际没有安装成功，具体情况需要用户自行处理和排查。
            </div>
          </el-collapse-item>
          <el-collapse-item
            title="部分条形码最后一位数字无法修改，且整体位数被限制了"
            name="4"
          >
            <div>
              这种情况是正常的，每种条形码的规范不同，标签软件确保了您生成条码的正确性。条形码如EAN13等，按照标准规范，最后一位是校验码，由系统计算得出的。且限制了总位数只有13位。这些规范都是可以在百度上查到的。如果有自由生成位数的需求，可以使用Code128码
            </div>
          </el-collapse-item>
          <el-collapse-item
            title="网页版如出现打印不清晰（如直线有锯齿，或者文字颜色比较弱））"
            name="4"
          >
            <div>将打印机半色调调为无，然后彩色打印模式改成真彩色</div>
          </el-collapse-item>
          <el-collapse-item
            title="点击【打印】，一直提示“WebSocket没准备好，点确定继续”问题"
            name="4"
          >
            <div>刷新当前页面即可。</div>
          </el-collapse-item>
          <el-collapse-item
            title="点击【打印】，提示”序列号打印配置不完整，处理中断“"
            name="4"
          >
            <div>
              原因：序列号元素的当前内容为空。解决方案：找到标签中数据类型是序列号的元素，在当前内容中输入值即可。
            </div>
          </el-collapse-item>
        </el-collapse>
      </div>
    </el-card>
  </div>
</template>

<style lang="scss" scoped>
.guideline {
  padding: 15px;
  background-color: #f5f5f5;
  border-radius: 10px;

  &-title {
    margin-bottom: 20px;
    font-size: 22px;
    font-weight: bold;
  }

  &-content {
    margin-bottom: 15px;
    font-size: 13px;
  }
}
</style>
